<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Solution Detail</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../resources/css/mui.css">
		<link rel="stylesheet" href="../../resources/css/style.css">
		<link rel="stylesheet" href="../../resources/css/solution/pdp.css">
		<script src="../../resources/assets/mui.js"></script>
		<script src="../../resources/assets/avalon.js"></script>
		<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
		<script src="../../resources/assets/mui.zoom.js"></script>
		<script src="../../resources/assets/mui.previewimage.js"></script>
		<script src="../../resources/js/lang/en.js"></script>
		<script src="../../resources/js/dahua.config.js"></script>
		<script src="../../resources/js/common.js"></script>
		<script src="../../resources/js/solution/pdp.js"></script>
	</head>

	<body ms-controller="pdpPage" >

		<input type="hidden" value="" id="uid" />
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white"></a>
			<h1 id="title" class="mui-title mui-ellipsis">
				{solution.title}
			</h1>
			<a class="mui-icon mui-pull-right share" href="#sharePopover">
				<i class="icon icon_share"></i>
			</a>
			<a class="mui-icon mui-pull-right collection" href="javascript:void(0);">
				<i class="icon icon_star"></i>
			</a>
		</header>

		<div id="pdp" class="mui-content mui-scroll-wrapper whitebg">

			<div class="mui-scroll">
				<div class="mui-row">
					<!--description1-->
					<div class="mui-card" ms-if="@solution.description1!=''">
						<div class="mui-card-content mui-content-padded" ms-html="@solution.description1==null?'':@solution.description1">
						</div>
					</div>

					<!--overview-->
					<div class="mui-col-xs-12 sd_box2 mui-card" ms-if="@solution.overview!=''">
						<h3>Solution Overview</h3>
						<img class="previewImg" ms-attr="{src: @solution.overview}" data-preview-src="" data-preview-group="1">
					</div>

					<!--solution details-->
					<div class="mui-col-xs-12 sd_box2" ms-if="@solution.solutionItems.length>0">
						<h3>Solution Details</h3>
						<ul class="mui-table-view mui-grid-view solutionItems">
							<li class="mui-table-view-cell mui-media mui-col-xs-6" ms-for='(i,solutionItem) in @solution.solutionItems'>
								<a href="item.html" ms-attr="{'data-id': @solutionItem.id}" class="link_position">
									<img class="mui-media-object" ms-attr="{src: @solutionItem.image}">
									<div class="mui-media-body link_title">
                                        <div style="
                                            width: 80%;
                                            overflow:  hidden;
                                            text-overflow: ellipsis;">
                                            {solutionItem.title}
                                        </div>
                                    
                                    </div>
                                    <i class="icon icon_more_white"></i>
								</a>
							</li>
						</ul>
						<script>
							mui('.solutionItems').on('tap', 'a', function(e) {
								var sid = this.getAttribute('data-id');
								var url = this.getAttribute('href');
								mui.openWindow({
									url: url + "?sid=" + sid
								});
							});
						</script>

					</div>

					<!--description2-->
					<div class="mui-col-xs-12 mui-card" ms-if="@solution.description2!=''">
                        <div class="sd_box1 mui-card-content mui-content-padded" ms-html="@solution.description2==null?'':@solution.description2">
						</div>
					</div>

				</div>
			</div>
		</div>

		<!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item" href="../product/category.html">
				<span class="mui-icon icon icon_product"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item mui-active" href="category.html">
				<span class="mui-icon icon icon_solution active"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item" href="../user/user.html">
				<span class="mui-icon icon icon_usercenter"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
		-->
		<div id="sharePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view shares">
						<li class="mui-table-view-cell">
							<a href="#emailShare">Email</a>
						</li>
						<!--<li class="mui-table-view-cell">
							<a class="whatsapp" href="javascript:void(0);">WhatsApp</a>
						</li>-->
					</ul>
				</div>
			</div>
		</div>

		<div id="emailShare" class="mui-popover mui-popover-action mui-popover-center">
			<div class="mui-popup mui-popup-in" style="display: block;">
				<div class="mui-popup-inner mui-share-inner">
					<div class="mui-popup-text">
						<form :validate="@validateSendMail" id="sendMailForm">
							
							<input type="hidden" ms-attr="{'value': @solution.title}" name="title" id="shareTitle" />
							<input type="hidden" ms-attr="{'value': @solution.image}" name="img" id="img" />
							
							<input type="hidden" ms-duplex="@solution.title" name="title" id="title"/>
							<div class="mui-input-row">
								<input id="email" placeholder="Input an e-mail address" name="email" class="mui-input-clear m-b-6" type="text" ms-duplex="@email" 
									ms-rules="{required: true,email: true}" data-required-message="The email is required!" 
									data-email-message="The email is not a valid email address!">
							</div>
							<div class="mui-input-row">
								<textarea id="content" name="content" rows="3" placeholder="Input e-mail subject" 
									ms-duplex="@content" ms-rules="{required: true,maxlength:256}" 
									data-required-message="The subject is required!"
									 data-maxlength-message="The subject must be  less than 256 characters long!">
								</textarea>

							</div>
						</form>
					</div>
				</div>
				<div class="mui-popup-buttons">
					<a class="mui-popup-button" href="#emailShare">Cancel</a>
					<a class="mui-popup-button mui-popup-button-bold" :click="@sendMail">Send</a>
				</div>
			</div>
		</div>

	</body>

</html>
